{extend name="public/common"}

{block name="style"}
<title>点对点教育VIP学员_排行榜</title>
    <style>
        * {
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, p, table, th, td, select, option {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{

        }
        .top{
            height:150px;
            background:url("__HOME__/images/rank/1.png") no-repeat center center;
            background-size:cover;
            position:relative;
        }
        .top>div{
            width: 50vw;
            height: 20px;
            background: #fff;
            float: right;
            margin-top: 129px;
        }
        .top>div>p{
            height: 20px;
            line-height: 20px;
            font-size: 13px;
            text-align: center;
        }
        .navbar>.classify{
            margin-top:10px;
            height:41px;
            margin-left:12px;
            margin-right:12px;
            border:1px solid #fc4f41;
            border-radius: 40px;
        }
        .navbar>.classify>li{
            width:33.3%;
            border-radius: 40px;
            background:url("") no-repeat center center;
            background-size:cover;
            float:left;
            height:39px;
            text-align: center;
            line-height: 39px;
            font-size: 15px;
            color:#fc4f41;
        }
        .navbar>.classify>li.active{
            background-image:url('__HOME__/images/rank/3.png');
            color:#fff;
        }
        .name{
            padding-left: 12px;
            padding-right: 12px;
            font-size: 14px;
            color:#999;
            line-height: 34px;
            border-bottom: 1px solid #e5e5e5;
        }
        .my{
            height:80px;
            border-bottom: 1px solid #e5e5e5;
            padding-left:8px;
            position: relative;
        }
        .my>span{
            width: 30px;
            height:24px;
            float:left;
            margin-top:13px;
            line-height: 24px;
            font-size: 20px;
            color:#333;
            text-align: center;
        }
        .my>.userImg{
            width: 30px;
            height:30px;
            float:left;
            margin-top:10px;
            margin-left:48px;
            border-radius: 50%;
        }
        .my>b{
            font-weight: normal;
            color:#666;
            font-size: 15px;
            line-height: 50px;
        }
        .my>p{
            float:left;
            width: 20vw;
            line-height: 50px;
            font-size: 14px;
            color:#666;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .my>div{
            float:left;
            line-height: 50px;
            width: 52vw;
            font-size: 14px;
            color:#aaa;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /**/
        .ranging>div>ul>li{
            height:51px;
            border-bottom: 1px solid #e5e5e5;
            padding-left:2px;
        }
        .ranging>div>ul>li>.king{
            width: 31px;
            height:24px;
            float:left;
            margin-top:13px;
        }
        .ranging>div>ul>li>span{
            width: 40px;
            height:24px;
            float:left;
            margin-top:13px;
            line-height: 24px;
            font-size: 20px;
            color:#333;
            text-align: center;
            display:none;
        }
        .ranging>div>ul>li>.userImg{
            width: 30px;
            height:30px;
            float:left;
            margin-top:10px;
            margin-left:10px;
            border-radius: 50%;
        }
        .ranging>div>ul>li>b{
            float:right;
            font-weight: normal;
            color:#666;
            font-size: 15px;
            line-height: 50px;
            margin-right:8px;
        }
        .ranging>div>ul>li>p{
            float:left;
            line-height: 50px;
            width: 20vw;
            font-size: 14px;
            color:#666;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ranging>div>ul>li>div{
            float:left;
            line-height: 50px;
            width: 52vw;
            font-size: 14px;
            color:#aaa;
            text-align: center;
            margin-left:10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
      /*  .ranging>div>ul>li:nth-child(-n+3)>b{
            color:#fc4f41;
        }*/
        .ranging>div>ul>li:nth-child(n+4)>span{
            display:block;
        }
        .ranging>div>ul>li:nth-child(n+4)>.king{
            display:none;
        }
        .ranging>div>ul>li:nth-child(1)>.king{
            background: url("__HOME__/images/rank/4.png") no-repeat center center;
            background-size:cover;
        }
        .ranging>div>ul>li:nth-child(2)>.king{
            background: url("__HOME__/images/rank/5.png") no-repeat center center;
            background-size:cover;
        }
        .ranging>div>ul>li:nth-child(3)>.king{
            background: url("__HOME__/images/rank/6.png") no-repeat center center;
            background-size:cover;
        }
        .defaults img {
            width: 16vw;
            position: absolute;
            left: 50%;
            margin-left: -8vw;
            top: 210%;
        }
        .a{

            position: absolute;
            bottom:-1vw;
            left:15vw;
        }
        .b{
            left:46vw;
            position: absolute;
            bottom:-1vw;
        }
        .c1{
            left:73vw;
            position: absolute;
            bottom:-1vw;
        }
        .sum{
            position: absolute;
            top:4vw;
        }
    </style>
{/block}
{block name="body"}
<div class="scroll"  style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
<div class="top">
    <div>
        <p>{$before}—{$time|time_format='Y/m/d'}</p>
    </div>
</div>
<div class="navbar">
    <ul class="classify">
        <li class="active">签到</li>
        <li>总结</li>
        <li>测试</li>
    </ul>
    <div class="name">
        <span>总排名</span>
        <span style="float: right">数据分析</span>
    </div>
    <div class="ranging">
        <!--//周榜-->
        <div data-id="1"  class="listes">
            {empty name="sign"}
            <div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>
            {else/}
            <div class="my">
                <span class="sum">{$info.rank}</span>
                <!--用户头像-->
                <img src="{$info.headimgurl}" alt="" class="userImg">
                {empty name="$info.name"}
                <p>{$info.nickname}</p>
                {else/}
                <p>{$info.name|substr=###,0,3}{eq name="$info.role" value="0"}同学{else/}老师{/eq}</p>
                {/empty}
                <!--积分-->
                <div>{$info.school_id|get_school}</div>
                {eq name="$info.percent" value="0"}
                <b class="a">百分比：{$info.percent}</b>
                {else/}
                <b class="a">百分比：{$info.percent*100}%</b>
                {/eq}
                <b class="b">均值：{$info.sign_ex}</b>
                <b class="c1">方差：{$info.sign_dx}</b>
            </div>
            <ul>
                {volist name="sign" id="si"}
                <li style="height: 80px;position: relative">
                    <!--前三名头像-->
                    <div class="king sum"></div>
                    <!--排名-->
                    <span class="sum">{$si.rank}</span>
                    <!--用户头像-->
                    <img src="{$si.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                    {empty name="$si.name"}
                    <p>{$si.nickname}</p>
                    {else/}
                    <p>{$si.name|substr=###,0,3}同学</p>
                    {/empty}
                    <!--积分-->
                    <div>{$si.school_id|get_school}</div>
                    <b class="a">百分比：{$si.percent*100}%</b>
                    <b class="b">均值：{$si.sign_ex}</b>
                    <b class="c1">方差：{$si.sign_dx}</b>
                </li>
                {/volist}
            </ul>
            {/empty}
        </div>
        <div data-id="2" style="display:none"  class="listes">
            {empty name="journal"}
            <div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>
            {else/}
            <div class="my">
                <span class="sum">{$info.ranks}</span>
                <!--用户头像-->
                <img src="{$info.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                {empty name="$info.name"}
                <p>{$info.nickname}</p>
                {else/}
                <p>{$info.name|substr=###,0,3}{eq name="$info.role" value="0"}同学{else/}老师{/eq}</p>
                {/empty}
                <!--积分-->
                <div>{$info.school_id|get_school}</div>
                {eq name="$info.percents" value="0"}
                <b class="a">百分比：{$info.percents}</b>
                {else/}
                <b class="a">百分比：{$info.percents*100}%</b>
                {/eq}
                <b class="b">均值：{$info.summary_ex}</b>
                <b class="c1">方差：{$info.summary_dx}</b>
            </div>
            <ul>
                {volist name="journal" id="jj"}
                <li style="height: 80px;position: relative">
                    <!--前三名头像-->
                    <div class="king sum"></div>
                    <!--排名-->
                    <span class="sum">{$jj.ranks}</span>
                    <!--用户头像-->
                    <img src="{$jj.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                    {empty name="$jj.name"}
                    <p>{$jj.nickname}</p>
                    {else/}
                    <p>{$jj.name|substr=###,0,3}同学</p>
                    {/empty}
                    <div>{$jj.school_id|get_school}</div>
                    <!--积分-->
                    <b class="a">百分比：{$jj.percents*100}%</b>
                    <b class="b">均值：{$jj.summary_ex}</b>
                    <b class="c1">方差：{$jj.summary_dx}</b>
                </li>
                {/volist}
            </ul>
            {/empty}
        </div>
        <div  data-id="3" style="display:none" class="listes">
            {empty name="test"}
            <div class="defaults"><img src="__HOME__/images/common/nomessage.png" alt="暂无消息"> </div>
            {else/}
            <div class="my">
                <span class="sum">{$info.rankss}</span>
                <!--用户头像-->
                <img src="{$info.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                {empty name="$info.name"}
                <p>{$info.nickname}</p>
                {else/}
                <p>{$info.name|substr=###,0,3}{eq name="$info.role" value="0"}同学{else/}老师{/eq}</p>
                {/empty}
                <!--积分-->
                <div>{$info.school_id|get_school}</div>
                <b class="a">均值：{$info.test_ex}</b>
                <b class="b">方差：{$info.test_dx}</b>
            </div>
            <ul>
                {volist name="test" id="si"}
                <li style="height: 80px;position: relative">
                    <!--前三名头像-->
                    <div class="king sum"></div>
                    <!--排名-->
                    <span class="sum">{$si.rankss}</span>
                    <!--用户头像-->
                    <img src="{$si.headimgurl}" alt="" class="userImg" style="margin-left:14vw">
                    {empty name="$si.name"}
                    <p>{$si.nickname}</p>
                    {else/}
                    <p>{$si.name|substr=###,0,3}同学</p>
                    {/empty}
                    <!--积分-->
                    <div>{$si.school_id|get_school}</div>
                    <b class="a">均值：{$si.test_ex}</b>
                    <b class="b">方差：{$si.test_dx}</b>
                </li>
                {/volist}
            </ul>
            {/empty}
        </div>
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>
    </div>
{/block}
{block name="script"}
<script src="__HOME__/js/jquery-1.12.1.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script src="__HOME__/js/reset.js"></script>
<script>
    var scrollNow = true;//判断下拉请求是否执行中.false为正在请求
    $('title' ).text('点对点教育VIP学员_排行榜');
    $(function(){
        c = getCookie("type")?getCookie("type"):0;
        if(!$('.classify>li').eq(c).hasClass('active')){
            $('.classify>li').eq(c).parent().find('.active').removeClass('active');
            $('.classify>li').eq(c).addClass('active');
            $('.ranging>div').hide();
            $('[data-id='+(parseInt(c)+1)+']').show();
        }
        var len = $(".listes").eq(c).find("ul li").length;
        if(len >=30){
            $('.tip').text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);
        }else{
            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
            $('.tip').hide();
        }
        $('.classify>li').click(function(){
            if(!$(this).hasClass('active')){
                $(this).parent().find('.active').removeClass('active');
                $(this).addClass('active');
                $('.ranging>div').hide();
                $('[data-id='+($(this).index()+1)+']').show();
            }
            var _index = $(this).index();
            var len = $(".listes").eq(_index).find("ul li").length;
            if(len >=30){
                $('.tip').text('上拉加载更多');
                document.getElementsByClassName("scroll")[0].addEventListener('scroll',handleScroll);

            }else{
                document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                $('.tip').hide();
            }
            setCookie("type",_index)
        });
    })

    var handleScroll = function() {
        var c = getCookie("type")?getCookie("type"):0;
        var type = parseInt(c)+1;
        var tip = $(".tip");
        var loading = $('.loading');
        var len  = $(".listes").eq(type-1).find("ul li").length;
        var el = document.getElementsByClassName("scroll")[0];
        if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
            scrollNow = false;
            tip.show().text('上拉加载更多');
            $.ajax({
                type: 'post',
                url: "{:Url('Rank/more')}",
                data: {
                    length:len,
                    type:type
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success: function (res) {
                    loading.toggleClass('hidden');
                    tip.show();
                    console.log(res)
                    if(res.code == 1){
                        addNews(res,type);
                        if(res.data.length==30){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener("scroll",handleScroll);
                    }
                    scrollNow = true;
                },error:function(data){

                }
            });
        }
    };
    function addNews(data,type){
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            switch (type){
                case 1:
                        var percent= list.percent*100;
                    html+='<li style="height: 80px;position: relative"><div class="king sum"></div>'+
                            '<span class="sum">'+list.rank+'</span><img src="'+list.headimgurl+'" alt="" class="userImg" style="margin-left:14vw">';
                    if(list.name){
                        html+='<p>'+list.name+'</p>';
                    }else {
                        html+='<p>'+list.nickname+'</p>';
                    }
                        html+='<div>'+list.school+'</div><b class="a">百分比：'+percent.toFixed(0)+'%</b><b class="b">均值：'+list.sign_ex+'</b><b class="c1">方差：'+list.sign_dx+'</b></li>';
                    break;
                case 2:
                    var percents= list.percents*100;
                    html+='<li style="height: 80px;position: relative"><div class="king sum"></div>'+
                            '<span class="sum">'+list.ranks+'</span><img src="'+list.headimgurl+'" alt="" class="userImg" style="margin-left:14vw">';
                    if(list.name){
                        html+='<p>'+list.name+'</p>';
                    }else {
                        html+='<p>'+list.nickname+'</p>';
                    }
                    html+='<div>'+list.school+'</div><b class="a">百分比：'+percents.toFixed(0)+'%</b><b class="b">均值：'+list.summary_ex+'</b><b class="c1">方差：'+list.summary_dx+'</b></li>';
                    break;
                default:
                    html +=' <li style="height: 80px;position: relative"><div class="king sum"></div><span class="sum">'+list.rankss+'</span> <img src="'+list.headimgurl+'" alt="" class="userImg" style="margin-left:14vw">'
                    if(list.name){
                        html+='<p>'+list.name+'</p>';
                    }else {
                        html+='<p>'+list.nickname+'</p>';
                    }
                    html+='<div>'+list.school+'</div>';
                    <!--积分-->
                    html+=  '<b class="a">均值：'+list.test_ex+'</b>'
                    html+='<b class="b">方差：'+list.test_dx+'</b></li>';
                    break;
            }
        }
        $(".listes").eq(type-1).find("ul").append(html);
    }
    //---微信接口JS-SDK的调用
    wx.config({
        debug: false,
        appId: '{$jsSign.appId}', // 必填，公众号的唯一标识
        timestamp: "{$jsSign['timestamp']}", // 必填，生成签名的时间戳，切记时间戳是整数型，别加引号
        nonceStr: '{$jsSign.nonceStr}', // 必填，生成签名的随机串
        signature: '{$jsSign.signature}', // 必填，签名，见附录1
        jsApiList: [
            'checkJsApi',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
        ]
    });

    wx.ready(function () {
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '【点对点教育VIP学员】每日签到和总结排行榜',
            link: 'http://mp.csppat.com/DDDeducation/public/index.php/home/rank/index.html',
            imgUrl: 'http://mp.csppat.com/DDDeducation/public/home/images/rank/1.png',
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
            title: '【点对点教育VIP学员】每日签到和总结排行榜', // 分享标题
            desc: '不骄不躁，奋力前行~~', // 分享描述
            link: 'http://mp.csppat.com/DDDeducation/public/index.php/home/rank/index.html', // 分享链接
            imgUrl: 'http://mp.csppat.com/DDDeducation/public/home/images/rank/1.png', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

    });
    wx.error(function (res) {
        alert('wx.error: '+JSON.stringify(res));
    });
</script>
{/block}